<template>
  <div class="aroundMap">
    <div id="Map"></div>
    <div class="aroundList">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="风景" name="1">
          <ol>
            <li @mouseover="showPoi(item.id)" v-for="item in scenicPoi" :key="item.id">
              <span class="name">{{item.name}}</span>
              <span class="distance">{{item.distance[0]}}</span>
            </li>
          </ol>
        </el-tab-pane>
        <el-tab-pane label="交通" name="2">
          <ol>
            <li @mouseover="showPoi(item.id)" v-for="item in trafficPoi" :key="item.id">
              <span class="name">{{item.name}}</span>
              <span class="distance">{{item.distance[0]}}</span>
            </li>
          </ol>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      activeName: "1",
      scenicPoi: [],
      trafficPoi: [],
      map: {},
      markers: [],
    };
  },
  async mounted() {
    await this.getLocation();
    await this.getLocation("交通");
    this.createMap();
  },
  methods: {
    //   类型切换
    handleClick(tab) {
      if (tab.label == "风景") {
        this.setMakers(this.scenicPoi);
      } else {
        this.setMakers(this.trafficPoi);
      }
    },
    //创建地图
    createMap() {
      window.onLoad = () => {
        this.map = new AMap.Map("Map");
        this.setMakers(this.scenicPoi);
        this.scenicPoi = this.getDistance(this.scenicPoi);
        this.trafficPoi = this.getDistance(this.trafficPoi);
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=681b24441863bb138a7af5f3f231821b&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
    //获取地址
    getLocation(val) {
      return this.$axios({
        url: "https://restapi.amap.com/v3/place/text",
        params: {
          key: "08ba82c4034203d71ec3eb13733750fd",
          city: this.data.name,
          offset: 10,
          types: val || "风景",
          location:
            this.data.location.longitude + "," + this.data.location.latitude,
        },
      }).then((res) => {
        if (val) {
          this.trafficPoi = res.data.pois;
        } else {
          this.scenicPoi = res.data.pois;
        }
      });
    },
    //创建点标记
    setMakers(data) {
      this.markers = data.map((poi, index) => {
        var marker = new AMap.Marker({
          title: poi.name,
          position: poi.location.split(","),
          content: "<span class='pointMarker'>" + (index + 1) + "</span>",
          extData: poi.id, //设置点id为后面获取使用
        });
        //移入点居中
        marker.on("mouseover", () => {
          return this.showPoi(poi.id);
        });
        return marker;
      });
      this.map.clearMap();
      this.map.add(this.markers);
      //自适应匹配地图视口
      this.map.setFitView();
    },
    //移入显示对应的点居中
    showPoi(poiId) {
      this.markers.forEach((marker) => {
        //获取点数据中的id
        if (marker.getExtData() == poiId) {
          //将当前的点显示在最顶层
          marker.setTop(true);
          //移入显示文本
          const infoWindow = new AMap.InfoWindow({
            content: `<span style="font-size: 12px;color: #333">${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32),
          });
          infoWindow.open(this.map, marker.getPosition());
          //点居中
          this.map.setCenter(marker.getPosition());
        }
      });
    },
    //计算距离
    getDistance(data) {
      var p1 = [this.data.location.longitude, this.data.location.latitude];
      data.forEach((item) => {
        var p2 = [...item.location.split(",")];
        var dis = AMap.GeometryUtil.distance(p1, p2);
        var distance = (dis / 1000).toFixed(2) + "公里";
        item.distance.push(distance);
      });
      return data;
    },
  },
};
</script>

<style lang="less" scoped>
.aroundMap {
  display: flex;
  height: 360px;
  padding: 20px 0;
  #Map {
    width: 65%;
    background: #ccc;
    /deep/.pointMarker {
      display: inline-block;
      width: 22px;
      height: 36px;
      background-image: url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
      background-size: 22px 36px;
      text-align: center;
      line-height: 24px;
      color: #fff;
    }
  }
  .aroundList {
    flex: 1;
    margin-left: 20px;
    font-size: 14px;
    color: #666;
    /deep/.el-tabs__content {
      height: 260px;
      overflow-y: auto;
    }
    ol {
      list-style: none;
      padding: 0;
      li {
        margin: 0 20px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>